<template>
  <div>
    <el-card>
      <span>胡帅</span>
      <el-form :inline="true">
        <el-form-item style="float:right">
          <el-button @click="addPermissions"  size="mini" type="success" icon="el-icon-edit">新增权限组</el-button>
        </el-form-item>
        <!-- 表格 -->
        <template>
          <el-table
            :data="treeList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            :default-expand-all='true'
            :tree-props="{children: 'childs',hasChildren: 'is_point'}">
            <el-table-column
              label="标题"
              width="200"
              height="57"
              >
              <template v-slot='{row}'>
                <i v-if="row.pid === null" class="el-icon-folder-opened"></i>
                <i v-else-if="!row.is_point" class="ivu-icon fa fa-file-o fa-fw"></i>
                <i v-else class="el-icon-view"></i>
                <span>{{ row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="code"
              label="权限点代码"
              width="1300">
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot='{ row }'>
                <el-button @click="edit(row)" class="skyblue" type="primary" icon="el-icon-edit" circle></el-button>
                <el-button @click="del(row)" class="red"  type="danger" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form>

    </el-card>
    <!-- 对话框 -->
    <menuAdd
    :dialogVisible.sync="dialogVisible"
    @getSelectData='getInitData'
     v-if="dialogVisible"
    :RowData.sync="rowObjData"
    :PermissionGroupsList='treeList'
    :typeStatus.sync="typeStatus"
    @load='loadPermissionInfo'
    @updatelist='updatelist'
    />
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import menuAdd from '../components/menu-add.vue'
export default {
  name: 'menuAddList',
  data () {
    return {
      treeList: [],
      newTreeList: [],
      tableItem: {
        page: 1,
        pagesize: 10,
        keyword: '',
        disabled: 1
      },
      dialogVisible: false,
      rowObjData: {},
      typeStatus: false,
      currentPage: 1

      // isTreeLoading: false,
      // isShowTree: false
    }
  },
  components: {
    menuAdd
  },
  computed: {

  },
  created () {
    this.loadPermissionInfo()
    this.getMenuList()
    this.getInitData()
  },

  methods: {
    // 加载权限
    async loadPermissionInfo () {
      const res = await list(this.tableItem)
      console.log(res)
      this.treeList = res.data
    },
    // 树形
    async getMenuList () {
      const res = await list(this.tableItem)
      this.treeList = res.data
      // console.log(res.data)
      this.treeList = res.data.map(item => {
        if (item.points && item.points.length) {
          item.childs = item.points
        }
        if (item.childs && item.childs.length) {
          item.childs.forEach(it => {
            if (it.points && it.points.length) {
              it.childs = it.points
            }
          })
        }
        return item
      })
    },
    // 获取页面初始化渲染数据,并更改数据结构
    async getInitData () {
      const { data } = await list()
      data.forEach(item => {
        if (item.childs) {
          item.childs.map(childItem => {
            childItem.childs = childItem.points
          })
        }
      })
      this.newTreeList = data
      // console.log(this.newTreeList)
    },
    // 新增权限组
    addPermissions () {
      this.dialogVisible = true
      this.typeStatus = false
    },
    // 编辑
    edit (row) {
      this.dialogVisible = true
      // console.log(row)
      this.rowObjData = row
      this.typeStatus = true
    },
    // 删除
    async del (row) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        await this.$message.success('删除成功')
        this.loadPermissionInfo()
      }).catch(() => {})

      // console.log(row)
    },
    updatelist () {
      this.loadPermissionInfo()
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.el-card{
  margin: 20px !important;
}
.skyblue{
  background-color: rgb(236, 245, 255,0.3);
  border-color: rgb(167, 212, 238,0.3);
  color: rgb(64, 158, 255);
  &:hover{
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
  color: #fff;
  }
}
.red{
  background-color: rgb(254, 240, 240,0.3);
  border-color: rgb(252, 206, 206,0.3);
  color: rgb(245, 123, 120);
  &:hover{
  background-color: rgb(245, 108, 108);
  border-color: rgb(245, 108, 108);
  color: #fff;
  }
}
/deep/.el-table__expand-icon {
  display: none !important;
}
/deep/.el-tree-node__expand-icon.expanded{
  display: none !important;
}
</style>
